<template>
  <div id="app">
    <router-view></router-view>
    <!-- 底部导航 -->
    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000" route v-if="showTarBar" z-index="2002">
      <van-tabbar-item icon="home-o" to="/home">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? require('@/assets/tarbar/home-o.png') : require('@/assets/tarbar/home.png')" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="search" to="/mall">
        <span>商城</span>
        <template #icon="props">
          <img :src="props.active ? require('@/assets/tarbar/category-o.png') : require('@/assets/tarbar/category.png')" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/shopcart">
        <span>购物车</span>
        <template #icon="props">
          <img :src="props.active ? require('@/assets/tarbar/cart-o.png') : require('@/assets/tarbar/cart_20190818_110336.png')" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/userinfo">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? require('@/assets/tarbar/my-o.png') : require('@/assets/tarbar/my.png')" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {
      active: 0
    }
  },

  computed: {
    showTarBar() {
      const routers = ['/login', '/forget', '/account', '/order', '/like', '/address', '/secure', '/addaddress', '/editaddress/', '/search', '/recommend', '/new', '/like', '/all/order']
      if (/^\/editaddress\//.test(this.$route.path)) return false
      if (/^\/goods\/detail\//.test(this.$route.path)) return false
      if (/^\/order\/payment\//.test(this.$route.path)) return false
      if (routers.indexOf(this.$route.path) === -1) {
        return true
      }

      return false
    }
  }
}
</script>

<style lang="less" scoped></style>
